<template>
  <textarea :id="tinymceId" style="visibility: hidden" />
</template>

<script>
import { plugins, toolbar } from "@/formgen/src/components/tinymce/config.js"
import _ from "lodash"
import { getToken } from "../../utils/auth"
import loadTinymce from "../../formgen/src/utils/loadTinymce"

let num = 1

export default {
  name: "Tinymce",
  props: {
    id: {
      type: String,
      default: () => {
        num === 10000 && (num = 1)
        return `tinymce${+new Date()}${num++}`
      }
    },
    value: {
      default: ""
    },
    toolbar: []
  },
  data() {
    return {
      tinymceId: this.id
    }
  },
  mounted() {
    const token = getToken()
    const uploadUrl = `${process.env.VUE_APP_API_ROOT}/user/file/upload`
    // eslint-disable-next-line global-require
    let conf = {
      selector: `#${this.tinymceId}`,
      language: "zh_CN",
      menubar: "false",
      icons: 'tduck',
      skin: "tduck",
      // skin_url: "/tinymce/skins/ui/tduck",
      // content_css: "/tinymce/skins/content/tduck",
      cache_suffix: "?v=0.0.3",
      plugins,
      fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
      toolbar: this.toolbar ? this.toolbar : toolbar,
      toolbar_drawer: "sliding",
      toolbar_mode: "sliding",
      height: 200,
      // fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
      branding: false,
      object_resizing: false,
      end_container_on_empty_block: true,
      powerpaste_word_import: "clean",
      code_dialog_height: 450,
      code_dialog_width: 1000,
      advlist_bullet_styles: "square",
      advlist_number_styles: "default",
      default_link_target: "_blank",
      entity_encoding: "row", // 所有字符都将以非实体形式保存，避免出现部分符号变成 html 编码
      link_title: false,
      statusbar: false,
      content_style: "img {max-width:100%;}",
      nonbreaking_force_tab: true,
      images_upload_handler(blobInfo, succFun, failFun) {
        const file = blobInfo.blob() // 转化为易于理解的file对象
        const xhr = new XMLHttpRequest()
        xhr.withCredentials = false
        xhr.open("POST", uploadUrl)
        xhr.setRequestHeader("Authorization", token)
        xhr.onload = function () {
          if (xhr.status !== 200) {
            failFun(`HTTP Error: ${xhr.status}`)
            return
          }
          const json = JSON.parse(xhr.responseText)
          if (!json || typeof json.data !== "string") {
            failFun(`Invalid JSON: ${xhr.responseText}`)
            return
          }
          succFun(json.data)
        }
        const formData = new FormData()
        formData.append("file", file, file.name) // 此处与源文档不一样
        xhr.send(formData)
      }
    }
    loadTinymce((tinymce) => {
      conf = Object.assign(conf, this.$attrs)
      conf.init_instance_callback = (editor) => {
        if (this.value) editor.setContent(this.value)
        this.vModel(editor)
      }
      tinymce.init(conf)
    })
  },
  destroyed() {
    this.destroyTinymce()
  },
  methods: {
    vModel(editor) {
      // 控制连续写入时setContent的触发频率
      this.$watch("value", (val, prevVal) => {
        if (editor && val !== prevVal && val !== editor.getContent()) {
          if (typeof val !== "string") val = val.toString()
          _.debounce(editor.setContent, 250, val)
        }
      })

      editor.on("change keyup undo redo", () => {
        this.$emit("input", editor.getContent())
      })
      editor.on("blur", () => {
        this.$emit("blur")
      })
    },
    destroyTinymce() {
      if (!window.tinymce) return
      const tinymceInstance = window.tinymce.get(this.tinymceId)
      if (tinymceInstance) {
        tinymceInstance.destroy()
      }
    }
  }
}
</script>
<style>
/* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
.tox-tinymce-aux {
  z-index: 99999 !important;
}

.tinymce.ui.FloatPanel {
  z-index: 99;
}
</style>
